// 表格内嵌组件构建器
 <template>
<div class="form-val">
    <div class="for-val">

        <component 
        v-if='cmp'
        :conf='cmp.conf' 
        v-model="value"
        :is="cmp.component ">
        </component>
        
    </div>
</div>
</template>

<script lang='ts'>
import {Component, Prop, Watch,  Vue} from 'vue-property-decorator'
import parckComponent from '@/components/ivew_components/parck_components/index'
import { deepCopy } from '@/utils/tools'


@Component({})
export default class form_val extends Vue{
    name:string = 'form-val'


    @Prop()
    data

    @Prop()
    row

    @Prop()
    index
    
    @Prop()
    mods

    @Prop()
    column

    // 监控数据变化
    value = this.row[this.column.key];

    @Watch('value')
    onValueChange(newVal, oldVal){

        // 手动赋值（防止直接动态赋值， 造成的组件重绘）
        this.row[this.column.key] = newVal
        let newData = deepCopy(this.data[this.index]);
        this.data[this.index] = Object.assign(newData, {[this.column.key]: newVal})


    }

    get cmp (){
        return this.mods[this.row.key];
    }
}

</script>

<style spaced lang='scss'>
.form-val{
    max-width: _rem(120px);
    margin: auto;
}

</style>


